import React from "react";
import { TabBar } from "antd-mobile";
import "../assets/font/iconfont.css";
import { withRouter } from "react-router-dom";
import "../assets/css/component.scss"
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false,
      fullScreen: true,
    };
  }
  render() {
    return (
      <div
        style={
          this.state.fullScreen
            ? { position: "fixed", height: "100%", width: "100%", top: 0 }
            : { height: 400 }
        }
      >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="red"
          barTintColor="white"
          hidden={this.state.hidden}
        >
            {/* 首页 */}
          <TabBar.Item
            title="首页"
            key="Life"
            icon={<i className="iconfont icon-shouye"></i>}
            selectedIcon={<i className="iconfont icon-shouye"></i>}
            selected={this.props.location.pathname === "/home"}
            onPress={() => {
              this.props.history.push("/home");
            }}
          >
            {this.props.location.pathname === "/home"&&this.props.children}
          </TabBar.Item>
          {/* 分类 */}
          <TabBar.Item
            icon={<i className="iconfont icon-leimupinleifenleileibie2"></i>}
            selectedIcon={
              <i className="iconfont icon-leimupinleifenleileibie2"></i>
            }
            title="分类"
            key="cetatry"
            selected={this.props.location.pathname === "/catetry"}
            onPress={() => {
              this.props.history.push("/catetry");
            }}
            data-seed="logId1"
          >
            {this.props.location.pathname === "/catetry"&&this.props.children}
          </TabBar.Item>
          {/* 购物车 */}
          <TabBar.Item
            icon={<i className="iconfont icon-gouwuche"></i>}
            selectedIcon={<i className="iconfont icon-gouwuche"></i>}
            title="购物车"
            key="cart"
            selected={this.props.location.pathname === "/cart"}
            onPress={() => {
              this.props.history.push("/cart");
            }}
          >
            {this.props.location.pathname === "/cart"&&this.props.children}
          </TabBar.Item>
          {/* 我的 */}
          <TabBar.Item
            icon={<i className="iconfont icon-wodedangxuan"></i>}
            selectedIcon={<i className="iconfont icon-wodedangxuan"></i>}
            title="我的"
            key="my"
            selected={this.props.location.pathname === "/my"}
            onPress={() => {
              this.props.history.push("/my");
            }}
          >
            {this.props.location.pathname === "/my"&&this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(App);
